<template>
	<view class="appBox">
		<view class="list-input">
			<form @submit.prevent="submit">
				<view class="item">
					<view class="acea-row row-middle">
						<input type="text" class="texts" placeholder="输入卡号" v-model="model.no" required />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<input type="text" class="texts" placeholder="输入防伪码" v-model="model.validate" required />
					</view>
				</view>
			</form>
		</view>
		<button class="btn" @click="submit">立即绑定</button>
	</view>
</template>

<script>
	import {
		bindUserCard
	} from "@/api/trading.js";

	export default {
		data() {
			return {
				model: {}
			};
		},


		methods: {
			async submit() {
				let that = this;
				if (!that.model.no)
					return that.$util.Tips({
						title: "请输入卡号",
					});
				if (!that.model.validate)
					return that.$util.Tips({
						title: "请输入防伪码",
					});
				bindUserCard(that.model)
					.then((res) => {
						uni.showToast({
							title: '绑定成功',
							icon: "success",
						});
						that.model = {}
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					})
					.catch((res) => {
						that.$util.Tips({
							title: res,
						});
					});
			},
		},
	};
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	@import url("../../static/css/gstyle.scss");

	.appBox {
		background-color: #f5f6f7;
		height: 100%;
		padding: 33rpx 33rpx 16rpx 33rpx;

		.list-input {
			.item {
				border-bottom: 1px solid #f0f0f0;
				background: #fff;

				.row-middle {
					position: relative;
					padding: 0 25rpx;
					margin-top: 20rpx;

					.texts {
						flex: 1;
						font-size: 28rpx;
						height: 89rpx;
						line-height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					input {
						flex: 1;
						font-size: 28rpx;
						height: 80rpx;
						line-height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

		}
	}

	page {
		background-color: #fff !important;
	}
</style>